<template>
  <div style="display: flex;align-items: center">
    <template v-for="(item, index) in items">
      <div
          class="divider"
          v-if="item.type === 'divider'"
          :key="`divider${index}`"
      >
      </div>
      <MenuItem v-else :key="index" v-bind="item"/>
    </template>
  </div>
</template>

<script setup lang="ts">
import {Editor} from "@tiptap/vue-3";
import MenuItem from "../MenuItem/index.vue";

const props = defineProps<{ editor: Editor }>();

const items = [

  {
    icon: "arrow-go-back-line",
    title: "上一步",
    action: () => props.editor?.chain().focus().undo().run(),
  },
  {
    icon: "arrow-go-forward-line",
    title: "下一步",
    action: () => props.editor?.chain().focus().redo().run(),
  }, {
    type: "divider",
  },
  {
    icon: "bold",
    title: "加粗",
    action: () => props.editor?.chain().focus().toggleBold().run(),
    isActive: () => props.editor?.isActive("bold"),
  },
  {
    icon: "italic",
    title: "斜体",
    action: () => {
      debugger;
      props.editor?.chain().focus().toggleItalic().run()
    },
    isActive: () => props.editor?.isActive("italic"),
  },
  {
    icon: "strikethrough",
    title: "删除线",
    action: () => props.editor?.chain().focus().toggleStrike().run(),
    isActive: () => props.editor?.isActive("strike"),
  },
  {
    icon: "code-view",
    title: "代码",
    action: () => props.editor?.chain().focus().toggleCode().run(),
    isActive: () => props.editor?.isActive("code"),
  },
  {
    icon: "mark-pen-line",
    title: "高亮",
    action: () => props.editor?.chain().focus().toggleHighlight().run(),
    isActive: () => props.editor?.isActive("highlight"),
  },
  {
    type: "divider",
  },
  {
    icon: "h-1",
    title: "标题1",
    action: () =>
        props.editor?.chain().focus().toggleHeading({level: 1}).run(),
    isActive: () => props.editor?.isActive("heading", {level: 1}),
  },
  {
    icon: "h-2",
    title: "标题2",
    action: () =>
        props.editor?.chain().focus().toggleHeading({level: 2}).run(),
    isActive: () => props.editor?.isActive("heading", {level: 2}),
  },
  {
    icon: "h-3",
    title: "标题3",
    action: () =>
        props.editor?.chain().focus().toggleHeading({level: 3}).run(),
    isActive: () => props.editor?.isActive("heading", {level: 3}),
  },
  {
    icon: "h-4",
    title: "标题4",
    action: () =>
        props.editor?.chain().focus().toggleHeading({level: 4}).run(),
    isActive: () => props.editor?.isActive("heading", {level: 4}),
  },
  {
    icon: "paragraph",
    title: "段落",
    action: () => props.editor?.chain().focus().setParagraph().run(),
    isActive: () => props.editor?.isActive("paragraph"),
  },
  {
    icon: "list-unordered",
    title: "无序列表",
    action: () => props.editor?.chain().focus().toggleBulletList().run(),
    isActive: () => props.editor?.isActive("bulletList"),
  },
  {
    icon: "list-ordered",
    title: "有序列表",
    action: () => props.editor?.chain().focus().toggleOrderedList().run(),
    isActive: () => props.editor?.isActive("orderedList"),
  },
  {
    icon: "list-check-2",
    title: "任务列表",
    action: () => props.editor?.chain().focus().toggleTaskList().run(),
    isActive: () => props.editor?.isActive("taskList"),
  },
  {
    icon: "code-box-line",
    title: "代码块",
    action: () => props.editor?.chain().focus().toggleCodeBlock().run(),
    isActive: () => props.editor?.isActive("codeBlock"),
  },
  {
    type: "divider",
  },
  {
    icon: "double-quotes-l",
    title: "块引用",
    action: () => props.editor?.chain().focus().toggleBlockquote().run(),
    isActive: () => props.editor?.isActive("blockquote"),
  },
  {
    icon: "separator",
    title: "分割线",
    action: () => props.editor?.chain().focus().setHorizontalRule().run(),
  },
  {
    type: "divider",
  },
  {
    icon: "text-wrap",
    title: "换行",
    action: () => props.editor?.chain().focus().setHardBreak().run(),
  },
  {
    icon: "format-clear",
    title: "清除样式",
    action: () =>
        props.editor?.chain().focus().clearNodes().unsetAllMarks().run(),
  }, {
    type: "divider",
  }, {
    icon: 'table-2',
    title: '插入表格',
    action: () => props.editor?.chain().focus()
        .insertTable({rows: 3, cols: 3, withHeaderRow: true}).run()
  }, {
    icon: 'delete-bin-6-line',
    title: '删除表格',
    action: () => props.editor?.chain().focus().deleteTable().run()
  },
  {
    icon: 'merge-cells-horizontal',
    title: '合并拆分单元格',
    action: () => props.editor?.chain().focus().mergeOrSplit().run()
  },
  {
    icon: 'insert-row-top',
    title: '上面添加一行',
    action: () => props.editor?.chain().focus().addRowBefore().run()
  },
  {
    icon: 'insert-row-bottom',
    title: '下面添加一行',
    action: () => props.editor?.chain().focus().addRowAfter().run()
  },
  {
    icon: 'delete-row',
    title: '删除行',
    action: () => props.editor?.chain().focus().deleteRow().run()
  },
  {
    icon: 'insert-column-left',
    title: '左边添加一列',
    action: () => props.editor?.chain().focus().addColumnBefore().run()
  },
  {
    icon: 'insert-column-right',
    title: '右边添加一列',
    action: () => props.editor?.chain().focus().addColumnAfter().run()
  },
  {
    icon: 'delete-column',
    title: '删除行',
    action: () => props.editor?.chain().focus().deleteColumn().run()
  },
  {
    icon: 'sip-line',
    title: '单元格背景色',
    action: () => props.editor?.chain().focus().toggleHeaderCell().run()
  }
];
</script>

<style lang="less">
.divider {
  background-color: rgba(#fff, 0.25);
  height: 23px;
  margin-left: 0.5rem;
  margin-right: 0.75rem;
  display: inline-block;
  border-right: 1px solid #ccc;
}
</style>
